<script src="assets/js/go.js"></script>
<script src="pages/js/flowchart.js"></script>
<script type="text/javascript">
    function saveChart() {
        saveDiagramProperties(); // do this first, before writing to JSON
        document.getElementById("mySavedModel").value = myDiagram.model.toJson();
        myDiagram.isModified = false;
        var name = $('#flowchart_name').val();
        if (name === "") {
            bootoast({
                message: '请输入流程图名称',
                position: 'top',
                type: 'warning',
                timeout: 1.5,
            });
        } else {
            var values = {"id": flowchartEditId, "chartName": name, "data": myDiagram.model.toJson()};
            $.ajax({
                type: 'POST',
                data: JSON.stringify(values),
                contentType: 'application/json',
                dataType: 'json',
                url: "/chart/update",
                success: function (data) {
                    if (data.status === 'success') {
                        bootoast({
                            message: '修改成功',
                            position: 'top',
                            type: 'success',
                            timeout: 1.5,
                        });
                    } else {
                        bootoast({
                            message: data.msg,
                            position: 'top',
                            type: 'danger',
                            timeout: 1.5,
                        });
                    }
                },
                error: function (e) {
                    bootoast({
                        message: '修改失败',
                        position: 'top',
                        type: 'danger',
                        timeout: 1.5,
                    });
                }
            });
        }
		$('#page-wrapper').load('pages/flowchart_table.html');
    }
</script>

<div id="sample">
    <div class="input-group"
         style="margin: 10px 10px 20px; width: 250px; position: absolute">
        <span class="input-group-addon">流程图名称</span> <input type="text" id="flowchart_name" class="form-control"
                                                            placeholder="请输入流程图名称">
    </div>
    <div id="toolbar" class="btn-group" style="margin: 10px 300px 20px">
        <button id="SaveButton" type="button" class="btn btn-default" onclick="saveChart()">
            <span class="glyphicon glyphicon-saved" aria-hidden="true"></span>保存
        </button>
        <button id="btn_out" type="button" class="btn btn-default">
            <span class="glyphicon glyphicon-log-out" aria-hidden="true"></span>退出
        </button>
    </div>
    <div style="width: 100%; white-space: nowrap;">
		<span style="display: inline-block; vertical-align: top; width: 150px">
			<div id="myPaletteDiv" style="border: solid 1px black; height: 800px"></div>
		</span> <span style="display: inline-block; vertical-align: top; width: 74%">
			<div id="myDiagramDiv" style="border: solid 1px black; height: 800px"></div>
		</span> <span
            style="display: inline-block; vertical-align: top; width: 250px">
			<div id="propertiesPanel"
                 style="display: none; padding: 10px 10px 10px; width: 280px">
				 <div class="input-group" style="margin:10px 20px 10px">
					<span class="input-group-addon" style="width:90px">车间名称</span> 
						  <select id="work_id" class="form-control selectpicker" title="请选择车间名称"
                                  style="width:140px" onchange="workIdChange()"></select>
			    </div>
			    <div class="input-group" style="margin:10px 20px 10px">
					<span class="input-group-addon" style="width:90px">设备类型</span> 
						  <select id="select_no" class="form-control selectpicker" title="请选择设备类型"
                                  style="width:140px" onchange="selectNoChange()"></select>
			    </div>
			    <div class="input-group" style="margin:10px 20px 10px">
					<span class="input-group-addon" style="width:90px">设备编号</span> 
						  <select id="select_type" class="form-control selectpicker" title="请选择设备编号"
                                  style="width:140px" onchange="selectTypeChange()"></select>
			    </div>
				<div class="input-group" style="margin:10px 20px 10px">
					<span class="input-group-addon" style="width:90px">采集数值</span>
						  <input id="select_value" readonly="readonly" class="form-control" style = "width:140px">
			    </div>
			    <div class="input-group" style="margin:10px 20px 10px">
					<span class="input-group-addon" style="width:90px">设备名称</span>
					<input id="conponentName" readonly="readonly" class="form-control" style = "width:140px">
			    </div>
			</div>
		</span>
    </div>
    <div>
		<textarea id="mySavedModel" style="width: 100%; height: 50px; display: none">
			{"class": "go.GraphLinksModel",
			"linkFromPortIdProperty": "fromPort",
			"linkToPortIdProperty": "toPort",
			"nodeDataArray": [],
			"linkDataArray": []}
		</textarea>
    </div>
</div>